<template>
  <div class="comments-wrap">
    <div class="comment-wrap">
      <div class="input-wrap" v-if="$store.state.userInfo">
        <el-input type="textarea" v-model="comment" rows="5" :maxlength="1000"></el-input>
        <div class="toolbar">
          <span @click="confirm">发表</span>
        </div>
      </div>
      <div class="input-wrap" v-else>
        <el-input type="textarea" v-model="comment" :maxlength="1000" rows="5" placeholder="请登录后参与讨论哦..." />
        <div class="please-login">
          <span @click="login">登录</span>后参与讨论
        </div>
      </div>
      <div class="tip">请回复有价值的信息，出现发广告或攻击他人将被禁止发言。</div>
    </div>
    <div class="comments-list">
      <div class="header">评论区</div>
      <ul>
        <li
          v-for="(item, index) in commentsList"
          :key="index"
        >
          <img class="avatar" :src="item.avatat" />
          <div class="info-wrap">
            <div class="name-wrap">
              <span class="name">{{item.name}}</span>
              <span class="date">{{item.date}}</span>
            </div>
            <div class="content" :title="item.content">
              {{item.content}}
            </div>
          </div>
        </li>
      </ul>
      <!-- <el-pagination
        background
        :hide-on-single-page="true"
        layout="prev, pager, next"
        :total="total"
      ></el-pagination> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'Comments',
  data() {
    return {
      comment: '',
      commentsList: [],
      total: 34
    };
  },
  created() {
    this.getData();
  },
  methods: {
    login() {
      this.$store.commit('SHOW_LOGIN', true);
    },
    confirm() {
      this.commentsList.unshift({
        id: this.commentsList.length,
        avatar: '',
        name: this.$store.state.userInfo.username,
        date: this.formatDate(new Date()),
        content: this.comment
      })
    },
    getData() {
      this.commentsList = [{
        id: 1,
        avatar: '',
        name: '我是大BOSS',
        date: '2020-08-29 15:13:37',
        content: '不是特别熟悉的网站，建议老哥还是别玩，要不然吃大亏啊'
      }, {
        id: 2,
        avatar: '',
        name: '不堵为赢',
        date: '2020-08-29 15:01:08',
        content: '黑网站的话一直是审核为由拒绝出款的，现在好多都是这样的套路'
      }];
    },
    oneToTwo(n) {
      return n < 10 ? `0${n}` : n;
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hours = date.getHours();
      const minutes = date.getMinutes();
      const seconds = date.getSeconds();
      const fn = this.oneToTwo;

      return `${year}-${fn(month)}-${fn(day)} ${fn(hours)}:${fn(minutes)}:${fn(seconds)}`;
    }
  }
}
</script>

<style lang="less" scoped>
  .comments-wrap {
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
    .comment-wrap {
      .input-wrap {
        border: 1px solid #ddd;
        /deep/ .el-textarea__inner {
          border: 0;
        }
        .please-login,
        .toolbar {
          display: flex;
          align-items: center;
          padding: 0 20px;
          height: 40px;
          line-height: 40px;
          background-color: #f7f9fa;
          span {
            margin-right: 10px;
            color: #418dff;
            cursor: pointer;
            &:hover {
              opacity: .8;
            }
          }
        }
        .toolbar {
          justify-content: flex-end;
          span {
            margin: 0;
            padding: 0 10px;
            line-height: 30px;
            border-radius: 3px;
            color: #fff;
            background-color: #418dff;
          }
        }
      }
      .tip {
        margin-top: 10px;
        color: #888;
      }
    }
    .comments-list {
      margin-top: 20px;
      .header {
        font-size: 20px;
      }
      li {
        display: flex;
        padding: 10px 0;
        border-bottom: 1px dashed #ddd;
        &:last-child {
          border: 0;
        }
        img {
          margin-right: 10px;
          width: 60px;
          height: 60px;
        }
        .info-wrap {
          padding: 5px 0;
          overflow: hidden;
          .name-wrap {
            display: flex;
            align-items: center;
            padding-bottom: 5px;
            .name {
              font-size: 18px;
              color: #333;
            }
            .date {
              margin-left: 10px;
              color: #888;
            }
          }
          .content {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
</style>
